<template>
  <div>
    <el-select
      v-model="name"
      placeholder="请选择名称">
      <el-option
        v-for="item in mockData"
        :key="item.value"
        :value="item.value"
        :label="item.label">
        <span style="float: left">{{item.label}}</span>
        <span
          v-if="item.checked"
          class="select-link"
          @click.stop="gotoPage(item)">跳转</span>
      </el-option>
    </el-select>

    <div>
      <el-date-picker
        v-model="datetime"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间"
        @change="datetimeChange"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      name: '',
      datetime: '',
      mockData: [
        { value: "aaa", label: "AAA", checked: true },
        { value: "bbb", label: "BBB", checked: false },
        { value: "ccc", label: "CCC", checked: true },
        { value: "ddd", label: "DDD", checked: false }
      ],
      pickerOptions: {
        disabledDate: (time) => {
          const currDate = new Date().getTime()
          const preDate = currDate - 8 * 24 * 60 * 60 * 1000
          return time.getTime() < preDate || time.getTime() > currDate
        }
      }
    }
  },
  methods: {
    gotoPage (item) {
      console.log("label" + item.label)
    },
    datetimeChange (a) {
      console.log(a)
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  }
}
</script>

<style scoped>
.select-link {
  float: right;
  margin: 0 0 0 20px;
  color: #409EFF;
}
</style>
